<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>敲代码的日与夜</title>
		<style>
			body {
				margin: 0;
				padding: 0;
			}
			.bg {
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
			}
			.bg::after {
				content: '';
				display: block;
				width: 600px;
				height: 600px;
				border-radius: 50%;
			}
			/* 太阳 */
			.sun {
				background: #ffeea2;
				clip-path: inset(0 50% 0 0);
				/* display: none; */
				z-index: 10;
			}
			.sun::after {
				background-color: orange;
				box-shadow: 0 0 30px orange;
			}

			/* 海面 */
			.sea {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 30%;
				backdrop-filter: blur(100px);
				-webkit-backdrop-filter: blur(100px);
				z-index: 20;
			}
			.work {
				display: flex;
				justify-content: center;
				margin-top: 50px;
				font-size: 80px;
				color: #fff;
				text-shadow: 0 0 10px #fff;
			}

			/* 月亮 */
			.moon {
				background-color: #040720;
			}
			.moon::after {
				box-shadow: 160px 180px 0 cyan;
				transform: translate(-160px, -180px);
			}
		</style>
	</head>

	<body>
		<div class="sun bg"></div>
		<div class="moon bg"></div>
		<div class="sea">
			<!-- <div class="work">敲代码的日和夜</div> -->
		</div>
		<script>
			window.addEventListener('mousemove', e => {
				let percentage = 100 - (e.clientX / window.innerWidth) * 100;
				const work = document.querySelector('.work');
				document.querySelector('.sun').style.clipPath = `inset(0 ${percentage}% 0 0)`;
			});
		</script>
	</body>
</html>
